<template>
  <!-- 事件修饰符不能使用按键码了 -->
  <!-- 依赖注入有响应式了 -->
  <!-- 过滤器被删除了 -->
  <h2>todolist - {{ formatTimer }} - <button @click="stop">暂停</button></h2>
  <input type="text" v-model="value" />
  <button @click="handleClick">添加</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="removeItem(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
let dsq;
export default {
  data() {
    return {
      value: "",
      list: [
        {
          name: "zhangsan",
          id: 1,
        },
        {
          name: "lisi",
          id: 2,
        },
      ],
      timer: 0,
    };
  },
  mounted() {
    this.timer = new Date().getTime();
    dsq = setInterval(() => {
      this.timer = new Date().getTime();
    }, 1000);
  },
  computed: {
    formatTimer() {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(this.timer);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
    },
  },
  methods: {
    handleClick() {
      this.list.push({
        id: new Date().getTime(),
        name: this.value,
      });
      this.value = "";
    },
    removeItem(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
    stop() {
      clearInterval(dsq);
    },
  },
  beforeUnmount() {
    clearInterval(dsq);
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
